<template>
  <div>
    <Add ref="add" @ok="search"></Add>
    <Update ref="update" @ok="search"></Update>
    <ZgNewPage
      ref="page"
      title="空间管理"
      :extraHeight="290"
      :pageOpt="{showSearchBtn:true,showConditionBtn:false}"
      :batchBtns="batchBtns"
      :dataBtns="dataBtns"
      addBtnName="创建空间"
      addBtnIcon="plus-circle"
      @search="onSearch"
      @add="toAdd">
      <template slot="columns">
        <a-table-column title="名称">
          <template slot-scope="obj">
            <div>{{ obj.name }}</div>
            <div><a-progress class="w100" :percent="30"></a-progress></div>
          </template>
        </a-table-column>
        <a-table-column title="使用情况">
          <template slot-scope="obj">
            12.3MB/50MB{{ obj.x }}
          </template>
        </a-table-column>
        <a-table-column title="授权用户">
          <template slot-scope="obj">{{ obj.x }}
            <a-tag>张三</a-tag>
            <a-tag>张三</a-tag>
            <a-tag>张三</a-tag>
            <a-tag>张三</a-tag>
            <a-tag>张三</a-tag>
          </template>
        </a-table-column>
        <a-table-column title="创建时间">
          <template slot-scope="obj">{{ obj.x }}
            2025/02/11 12:11:11
          </template>
        </a-table-column>
      </template>
    </ZgNewPage>
  </div>
</template>
<script>
import Add from './Add'
import Update from './Update'
export default {
  components: {
    Add,
    Update
  },
  data () {
    return {
      batchBtns: [
        { key: 1, label: '批量删除' },
        { key: 2, label: '批量修改' }
      ],
      dataBtns: [
        { key: 1, name: '删除', type: 'primary', icon: 'fa-trash', isShow: () => { return true } },
        { key: 2, name: '修改', type: 'link', icon: 'fa-pencil', isShow: () => { return true } },
        { key: 3, name: '授权用户', type: 'link', icon: 'fa-users', isShow: () => { return true } }
      ]
    }
  },
  mounted () {
  },
  methods: {
    search () {
      this.$refs.page.search()
    },
    onSearch (param) {
      // 加载表头
      const list = [
        { id: '1', name: 'haha', sex: '男', age: 18, isUse: true, createTime: '2025/03/11 12:20:11' },
        { id: '2', name: 'zxb', sex: '男', age: 18, isUse: true, createTime: '2025/03/11 12:20:11' },
        { id: '3', name: 'zxb', sex: '男', age: 18, isUse: true, createTime: '2025/03/11 12:20:11' },
        { id: '4', name: 'zxb', sex: '男', age: 18, isUse: true, createTime: '2025/03/11 12:20:11' },
        { id: '5', name: 'zxb', sex: '男', age: 18, isUse: true, createTime: '2025/03/11 12:20:11' }
      ]
      this.$refs.page.endSearch({
        total: list.length,
        list: list.map(t => {
          t.key = t.id
          return t
        })
      })
    },
    toAdd () {
      this.$refs.add.open()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
